<div class="pie-chart" ng-class="{ 'danger': chartData.overMax }">
  <chart-tooltip tooltip-data="model.tooltipData"></chart-tooltip>

  <div ng-if="::model.settings.showTitle && chartData.title"
       class="pie-chart-title {$ ::model.settings.titleClass $}">
    {$ ::chartData.title $} ({$ model.total ? model.total + ' ' : '' $}{$ model.totalLabel $})
  </div>

  <svg class="svg-pie-chart"
    ng-show="chartData.showChart"
    ng-attr-height="{$ ::model.settings.diameter $}"
    ng-attr-width="{$ ::model.settings.diameter $}">
    <g class="chart"
      ng-attr-transform="translate({$ ::model.settings.outerRadius $},{$ ::model.settings.outerRadius $})">
      <g class="slices"></g>
      <g ng-if="::model.settings.showLabel && chartData.label" class="pie-chart-label">
        <text dy="0.35em" ng-style="model.settings.label"
              ng-class="{ 'danger': chartData.overMax }">{$ chartData.label $}</text>
      </g>
    </g>
  </svg>

  <div ng-if="::model.settings.showLegend" class="pie-chart-legend">
    <div ng-repeat="slice in chartData.data | showKeyFilter"
      class="slice-legend">
      <div ng-if="chartData.showChart" class="slice-key" ng-class="slice.colorClass"></div>
      <div ng-class="[slice.colorClass, chartData.chartless]">{$ slice.value $}</div>
      <div>{$ slice.label $}</div>
    </div>
  </div>
</div>